import React from 'react';

class TabTitle extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'TabTitle';
        // mode 两个选项
         // club 俱乐部主页的赛程的部分
         // video 主页 视频 部分的
        this.state = {
            mode: props.mode,
            tabsTitle: {
               club: ["未来赛程", "以往赛程" ],
               video: ["正在直播", "往期精彩"]
            } ,
            tabActiveMode: 0
        }
    }

    onHandleClick(index) {
        this.setState({
            tabActiveMode: index
        });
        if("video"== this.state.mode ){
            this.props.onHandleVideoChange( index );
        } else {
            this.props.onHandleChangeSchedule(index );
        }
    }

    render() {
        let title = this.state.tabsTitle[this.state.mode].map(function( tab, index ){
                return (
                    <button key={index}  className={ index==this.state.tabActiveMode? 'active': '' } onClick = {this.onHandleClick.bind(this, index)} > {tab} </button>
                )
            }.bind(this)
        )

        return (
            <div className="tabTitle">
                {title}
            </div>
        );
    }
}

export default TabTitle;
